<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style/public.css">
    <link rel="stylesheet" href="../style/bootstrap.css">
    <link rel="stylesheet" href="../style/home.css">
    <title>后台管理系统</title>
</head>

<body>
    <div class="home">
        <header class="h70 fcb pa10 ba289">
            <div class="fl aic">
                <img :src="headInfo.icon" alt="">
                <span class="f16 ml-10 cfff">{{ headInfo.name }}</span>
            </div>
            <h1 class="f16 cfff">后台管理系统</h1>
        </header>

        <section class="baa">
            <li class="item ">用户管理</li>
            <li class="item active">数据管理</li>
            <li class="item ">会员管理</li>
            <li class="item ">404页面</li>
            <li class="item ">设置管理</li>
        </section>

        <main>
            <div class="container">
                <div class="fcb">
                    <h1 class="pt-4">数据管理</h1>
                    <button @click="addUser()" class="btn mt-3 btn-primary">添加用户</button>
                </div>
                <table class="table user-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>作者</th>
                            <th>标题</th>
                            <th>用户头像</th>
                            <th>发布时间</th>
                            <th>浏览</th>
                            <th>点赞</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>例</td>
                            <td>张三</td>
                            <td>zhangsan</td>
                            <td>13800138000</td>
                            <td>2020-08-15</td>
                            <td>2022-12-15</td>
                            <td>管理员</td>
                            <td>
                                <button class="btn btn-sm btn-warning">编辑</button>
                                <button class="btn btn-sm btn-danger">删除</button>
                            </td>
                        </tr>
                        <tr v-for="(item, index) in user" :key="item.id">
                            <td>{{ item.id }}</td>
                            <td v-if="!item.editing">{{ item.name }}</td>
                            <td v-if="!item.editing">{{ item.username }}</td>
                            <td v-if="!item.editing">{{ item.phone }}</td>
                            <td v-if="!item.editing">{{ formateDate(item.cTime) }}</td>
                            <td v-if="!item.editing">{{ formateDate(item.uTime) }}</td>
                            <td v-if="!item.editing">{{ item.authority === 1? '超级管理员' : item.authority === 2? '管理员' : '普通用户' }}</td>
                            <td>
                                <button v-if="!item.editing" @click="editUser(item)" class="btn btn-sm btn-warning">编辑</button>
                                <button v-if="item.editing" @click="updateUser(item)" class="btn btn-sm btn-success">完成</button>
                                <button @click="deleteUser(item.id)" class="btn btn-sm btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>

    </div>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/vue2.js"></script>
    <script>
        const userId = location.href.split('?')[1].split('=')[1];
        const home = new Vue({
            el: '.home',
            data: {
                headInfo: [],
                user: []
            },
            async created() {
                let resHeadInfo = await axios.get('http://localhost:3888/user/' + userId);
                this.headInfo = resHeadInfo.data;
            },
        })
    </script>
</body>

</html>